<template>
  <div style="height: 100vh;width: 100%;background-color: #2b4b6b;">
    <div class="login_box">
      <div style="color: #666; font-size: 30px;text-align: center;padding: 20px 0">欢迎登录</div>
      <div style="padding: 0 50px">
        <el-form :rules="rules">
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user-solid" v-model="form.username" style="width: 100%;"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password style="width: 100%;"></el-input>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button style="width: 48%" type="primary" @click="login">登 录</el-button>
            <el-button style="width: 48%" type="primary" @click="register">注 册</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>


export default {
  name: "Login",
  data(){
    return {
      form:{
        username: 'admin',
        password: '123456'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      },
      methods: {
        login(){

        },
        register(){

        }
      }
    }
  },
}
</script>

<style scoped>
  .login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

</style>
